<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>铺机推广</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="./static/css/base.css" rel="stylesheet">
    <script src="./static/js/jquery.min.1.10.2.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <section class="content">
        <section class="top">
            <div class="label">临时合伙人</div>
            <div class="user">
                <div class="user_img"><img src="static/images/myTeam.png" alt=""></div>
                <p class="user_name">刘小牛 <span>开</span></p>
                <p class="user_date">有效期：2020-04-06 12:00</p>
            </div>
            <div class="btn">
                <div>关闭铺机</div>
                <div>续费</div>
            </div>
            <ul class="routing">
                <li><img src="static/images/tuandui.png" alt="">我的团队</li>
                <li><img src="static/images/shouyi.png" alt="">我的收益</li>
                <li><img src="static/images/huanbang.png" alt="">换绑手机号</li>
                <li><img src="static/images/fenzu.png" alt="">申请退款</li>
            </ul>
        </section>
        <section class="upgrade">
            <div class="title">我要升级</div>
            <div class="robot">
                <div class="robot_img"><img src="./static/images/machine.png" alt=""></div>
                <div class="robot_introduction">
                    <p class="robot_promote">铺机推广</p>
                    <p class="robot_price">¥4880</p>
                    <p class="robot_rent">租金：¥988/月</p>
                </div>
                <div class="btn">升级</div>
            </div>
            <div class="robot">
                <div class="robot_img"><img src="./static/images/commercial.png" alt=""></div>
                <div class="robot_introduction">
                    <p class="robot_promote">商用版租赁推广</p>
                    <p class="robot_price">¥9880</p>
                    <p class="robot_rent">租金：¥888/月</p>
                </div>
                <div class="btn">升级</div>
            </div>
        </section>
        <section class="promote_title">我的权益</section>
        <section class="promote">
            <section class="service">
                <div>售后服务</div>
                <p>如果后期不再使用的话可以申请退款，前三个月后会有1200元/月的折旧费。超过三个月后不再收。</p>
            </section>
            <section class="income">
                <div>收益推广</div>
                <section><span></span>
                    <p>普通合伙人，每推广一台收益1000元，每月门店实行服务奖。二级门店运行服务奖每月80元</p>
                </section>
                <section><span></span>
                    <p>资深合伙人（累计推广20台），所有下级门店实行服务奖每月80元（一级资深及团队30元，二级资深及团队10元）</p>
                </section>
            </section>
        </section>
    </section>
    <style type="text/css" media="screen">
    .top {
        width: 7.50rem;
        height: 6.26rem;
        background: url("./static/images/bgtop.png") no-repeat;
        background-size: 100%;
        background-position: 0% 0%;
        position: relative;
    }

    .top .label {
        width: 1.6rem;
        height: 0.56rem;
        text-align: center;
        line-height: 0.56rem;
        background-color: #CCA763;
        color: #FFFFFF;
        font-size: 0.26rem;
        border-radius: 0px 0px 0.1rem 0.1rem;
        position: absolute;
        top: 0.425rem;
        left: 5.2rem;

    }

    .top .user {
        width: 100%;
        height: 2rem;
        position: absolute;
        top: 0.705rem;
        left: 0rem;
    }

    .top .user .user_img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0 auto;
    }

    .top .user .user_name {
        width: 100%;
        height: auto;
        margin-top: 0.17rem;
        margin-bottom: 0.29rem;
        font-size: 0.36rem;
        text-align: center;
        color: rgba(229, 186, 117, 1);

    }

    .top .user .user_name span {
        display: inline-block;
        width: 0.8rem;
        height: 0.36rem;
        font-size: 0.24rem;
        text-align: center;
        line-height: 0.36rem;
        margin-left: 0.08rem;
        color: #FFFFFF;
        background-color: rgba(229, 186, 117, 1);
        border-radius: 0.18rem;
    }

    .top .user .user_date {
        width: 100%;
        height: auto;
        text-align: center;
        font-size: 0.28rem;
        color: rgba(153, 102, 14, 1);
    }

    .top .btn {
        width: 100%;
        height: 0.72rem;
        position: absolute;
        top: 3.735rem;
        left: 0;
        display: flex;
        padding: 0 0.45rem;
    }

    .top .btn div {
        width: 2.4rem;
        height: 0.72rem;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.72rem;
        margin-left: 0.55rem;
        color: #FFFFFF;
        background-color: rgba(229, 186, 117, 1);
        border-radius: 0.36rem
    }

    .top .routing {
        width: 100%;
        height: 1.13rem;
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 5.1rem;
        left: 0;
    }

    .top .routing li {
        width: 1.25rem;
        height: 1.13rem;
        text-align: center;
    }

    .top .routing li img {
        display: block;
        height: 0.5rem;
        margin: 0 auto;
        margin-bottom: 0.22rem;
    }

    .upgrade {
        width: 100%;
        height: auto;
        margin-top: 0.68rem;
        padding: 0.32rem 0.4rem;
        background-color: rgba(250, 250, 252, 1);
    }

    .upgrade .title {
        width: 100%;
        height: auto;
        text-align: center;
        font-size: 0.32rem;
        color: #333333;
    }

    .upgrade .robot {
        width: 6.7rem;
        height: 2.4rem;
        background-color: #ffffff;
        padding: 0.2rem;
        margin-top: 0.35rem;
        border-radius: 0.1rem;
        display: flex;
        justify-content: space-between;
        box-shadow: 0px 0.05rem 0.12rem 0px rgba(11, 43, 129, 0.1);
    }

    .upgrade .robot_img {
        width: 2rem;
        height: 2rem;
    }

    .upgrade .robot_introduction {
        width: 4.1rem;
        padding: 0.2rem;
    }

    .upgrade .robot_promote {
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .upgrade .robot_price {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 167, 13, 1);
        margin-top: 0.2rem;
        margin-bottom: 0.28rem;
    }

    .upgrade .robot_rent {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .upgrade .robot .btn {
        width: 1.2rem;
        height: 0.64rem;
        text-align: center;
        line-height: 0.64rem;
        color: #FFFFFF;
        background-color: rgba(229, 186, 117, 1);
        border-radius: 0.32rem;
        margin-top: 0.88rem;
    }

    .promote {
        width: 100%;
        height: auto;
        padding: 0.2rem 0.3rem;
        background-color: rgba(250, 250, 252, 1);
    }

    .promote_title {
        width: 100%;
        height: 1.12rem;
        text-align: center;
        line-height: 1.12rem;
        font-size: 0.32rem;
        color: #333333;
        background-color: #ffffff;
    }

    .service {
        width: 100%;
        height: auto;
        background-color: #ffffff;
        padding: 0.46rem 0.2rem;
    }

    .service div,
    .income div {
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
    }

    .service p {
        margin-top: 0.34rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .income {
        width: 100%;
        height: auto;
        background-color: #ffffff;
        padding: 0.35rem 0.2rem;
    }

    .income section {
        width: 100%;
        height: auto;
        margin-top: 0.42rem;
        position: relative;
    }

    .income section span {
        position: absolute;
        top: 0.15rem;
        display: inline-block;
        width: 0.16rem;
        height: 0.16rem;
        border-radius: 50%;
        background-color: #2E72F1;
    }

    .income section p {
        margin-left: 0.36rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .ConfirmApplication {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0, 0.9);
    }

    .ConfirmApplication .bulletBox {
        position: absolute;
        width: 6.5rem;
        height: 4rem;
        padding: 0.45rem;
        border-radius: 0.1rem;
        background-color: #ffffff;
        z-index: 10;
        left: 0.5rem;
        top: 2.5rem;
    }

    .ConfirmApplication .bulletBox .cross {
        width: 0.37rem;
        height: 0.37rem;
        background: url(./static/images/cross.png);
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
        top: -0.2rem;
        left: 5.4rem;
    }

    .ConfirmApplication .bulletBox .bulletBox_title {
        width: 100%;
        height: 0.31rem;
        margin-bottom: 0.51rem;
        text-align: center;
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .ConfirmApplication .bulletBox .bulletBox_txt {
        width: 100%;
        height: 0.31rem;
        margin-bottom: 0.81rem;
        text-align: center;
        font-size: 0.28rem;
        color: rgba(51, 51, 51, 1);
    }

    .ConfirmApplication .bulletBox .btn_submit {
        width: 3.7rem;
        height: 0.88rem;
        border-radius: 0.44rem;
        margin: 0 auto;
        text-align: center;
        line-height: 0.88rem;
        font-size: 0.32rem;
        color: #FFFFFF;
        background-color: #3D7DFF;
    }
    </style>
    <script type="text/javascript">
    (function() {
        var frame = function() {
            var pane = $.extend(true, {}, Pane)
            var api = $.extend(true, {}, API)
            var model = $.extend(true, {}, Model)
            pane.api = api
            pane.model = model
            pane.init()
        }
        var Pane = {
            init() {
                this.bindEvents();
            },
            initbody() {
                // let data = this.api.getList();
                // let that = this;
                // let dom = ``
                // $(".content").empty();
                // $(".content").append(dom);
            },
            bindEvents() {
                $(".content")
                    .on('click', '.user_name span', ({ currentTarget, target }) => {
                        if (currentTarget == target) {
                            console.log("开");
                        }
                    })
                    .on('click', '.btn div', ({ currentTarget, target }) => {
                        if (currentTarget == target) {
                            if ($(currentTarget).text() == "关闭铺机") {
                                console.log("关闭铺机")
                            } else {
                                window.location.href = "./renewal.html"
                            }
                        }
                    })
                    .on('click', '.routing li', ({ currentTarget, target }) => {
                        console.log("currentTarget", $(currentTarget).text(), $(currentTarget).index());
                        switch ($(currentTarget).index()) {
                            case 0:
                                window.location.href = "./myTeam.html"
                                break;
                            case 1:
                                window.location.href = "./myEarnings.html"
                                break;
                            case 2:
                                window.location.href = "./Changetel.html"
                                break;
                            case 3:
                                window.location.href = "./requestRefund.html"
                                break;
                            default:

                                break;
                        }
                    })
                    .on('click', '.upgrade .btn', ({ currentTarget, target }) => {
                        if (currentTarget == target) {
                            let that = this;
                            let dom = `<div class="ConfirmApplication">
                                <div class="bulletBox">
                                    <div class="cross"></div>
                                    <div class="bulletBox_title">升级</div>
                                    <div class="bulletBox_txt">确认升级商用版租赁推广，成为普通合伙人？</div>
                                    <div class="btn_submit">确定申请</div>
                                </div>
                            </div>`
                            $(".content").append(dom);
                        }
                    })
                    .on('click', '.ConfirmApplication .cross', ({ currentTarget, target }) => {
                        if (currentTarget == target) {
                            $(".ConfirmApplication").remove();
                        }
                    })
                    .on('click', '.ConfirmApplication .btn_submit', ({ currentTarget, target }) => {
                        if (currentTarget == target) {
                            console.log("确定申请");
                            $(".ConfirmApplication").remove();
                        }
                    })
            }
        };
        var API = {
            getList() {

            }
        };
        var Model = {

        };
        return frame();
    })()
    </script>
</body>

</html>